<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-edit"></i> 配置管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>其他配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box">
            <el-form ref="edit" style="width:100%" :model="data" label-width="150px">
          <!--      <el-form-item label="系统维护开关" style="width:40%">
                    <el-switch v-model="data.system_open" active-value="1" inactive-value="0"></el-switch>
                    <p class="tips">
                        <span>提示:</span>系统维护开关,关闭用户不能进入APP
                    </p>
                </el-form-item>-->
                  <el-form-item label="热门搜索标签" style="width:80%">
                      <el-input
                              type="textarea"
                              :rows="5"
                              placeholder="请输入"
                              v-model="data.hot_search">
                      </el-input>
                      <p class="tips">
                          <span>提示:</span>添加显示在APP搜索功能中，多个请用在|隔开
                      </p>
                  </el-form-item>
                <el-form-item label="APP下载链接地址" style="width:80%">
                      <el-input v-model="data.app_download_url" autocomplete="off"></el-input>
                      <p class="tips">
                          <span>提示:</span>（带协议http://或https://）
                      </p>
                  </el-form-item>

               <el-form-item label="支付配置开关" style="width:50%">
                    <el-checkbox-group v-model="data.paytype" @change="change">
                        <el-checkbox v-for="(item,index) in paytype"  :label="item.value" :key='index' :checked="item.checked" >{{item.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="提现是否自动审核" prop="is_auto_audit_withdraw">
                    <el-radio-group v-model="data.is_auto_audit_withdraw">
                        <el-radio :label="'1'">是</el-radio>
                        <el-radio :label="'0'">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                        <!--<el-form-item label="平台介绍" style="width:100%">-->
                    <!--<editor-bar v-model="data.about" :isClear="true" @change="contentChange2"></editor-bar>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="转账开关" style="width:40%">-->
                    <!--<el-switch v-model="data.zhuanzhang_open" active-value="1" inactive-value="0"></el-switch>-->
                    <!--<p class="tips">-->
                        <!--<span>提示:</span>转账开关-->
                    <!--</p>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="竞猜维护内容提示" style="width:100%">-->
                    <!--<editor-bar v-model="data.jc_close_content" :isClear="true" @change="contentChange4"></editor-bar>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="竞猜页面头部图片" style="width:100%" >-->
                    <!--<el-upload-->
                            <!--:auto-upload="true"-->
                            <!--accept="image/*"-->
                            <!--:action="api.upload_img_url"-->
                            <!--:on-success="imagesUploadSuccess1"-->
                            <!--:on-error="uploadError"-->
                            <!--:multiple="false"-->
                            <!--:limit="1"-->
                            <!--list-type="picture-card"-->
                            <!--:file-list="file_jctopimg"-->
                    <!--&gt;-->
                        <!--<i slot="default" class="el-icon-plus"></i>-->
                        <!--<div slot="file" slot-scope="{file}">-->
                            <!--<img-->
                                    <!--class="el-upload-list__item-thumbnail"-->
                                    <!--:src="file.url" alt=""-->
                            <!--&gt;-->
                            <!--<span class="el-upload-list__item-actions">-->
                            <!--<span-->

                                    <!--class="el-upload-list__item-delete"-->
                                    <!--@click="handleRemove1(file)"-->
                            <!--&gt;-->
                            <!--<i class="el-icon-delete"></i>-->
                            <!--</span>-->
                        <!--</span>-->
                        <!--</div>-->
                    <!--</el-upload>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="QQ群二维码" style="width:100%" >
                    <el-upload
                            :auto-upload="true"
                            accept="image/*"
                            :action="api.upload_img_url"
                            :on-success="imagesUploadSuccess2"
                            :on-error="uploadError"
                            :multiple="false"
                            :limit="1"
                            list-type="picture-card"
                            :file-list="file_qq_qrcode"
                    >
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url" alt=""
                            >
                            <span class="el-upload-list__item-actions">
                            <span

                                    class="el-upload-list__item-delete"
                                    @click="handleRemove2(file)"
                            >
                            <i class="el-icon-delete"></i>
                            </span>
                        </span>
                        </div>
                    </el-upload>
                </el-form-item>-->
                <div style="width:100%;display:flex;justify-content:center;">
                    <el-button
                            type="primary"
                            style="margin-top:15px;"
                            @click="saveContent"
                            size="medium "
                    >保 存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import EditorBar from '../../common/wangEnduit';
    export default {
        components: { EditorBar },
        name: 'other',
        data () {
            return {
                paytype:[
                    {'name':'余额支付','value':'balance','checked':false},
                    {'name':'支付宝APP支付','value':'aliapp','checked':false},
                    {'name':'支付宝H5支付','value':'alih5','checked':false}
                    ],//,{'name':'银行卡','value':'bank','checked':true}
                data: {
                    is_auto_audit_withdraw : '0',
                    ad_open: '',
                    about: '',
                    ad_type: '',
                    ad_video_num: '',
                    ad_to_num: '',
                    paytype:[],
                    bucprice:'',
                    bucqrcode:'',
                    mobile:'',
                    jc_rule:'',
                    jc_open:'',
                    jiaoyi_open:'',
                    zhuanzhang_open:'',
                    yj_zhuangjf_open:'',
                    jc_close_content:'',
                    jctopimg:'',
                    qq_qrcode:'',


                    hot_search:'',//热门搜索
                    app_download_url:''
                },
                file_bucqrcode:[],
                file_jctopimg:[],
                file_qq_qrcode:[],
                getOther () {
                    let that = this;
                    that.api.requests('getOtherConfig', 'GET', {}, function (result) {
                        that.data = result.data.info;
                        console.log("result.data.info",result.data.info);
                        
                        if(that.data.bucqrcode !=""){
                            that.file_bucqrcode=[{name:'图片','url':that.api.base_url+that.data.bucqrcode}]
                        }
                        if(that.data.jctopimg !=""){
                            that.file_jctopimg=[{name:'图片','url':that.api.base_url+that.data.jctopimg}]
                        }
                        if(that.data.qq_qrcode !=""){
                            that.file_qq_qrcode=[{name:'图片','url':that.api.base_url+that.data.qq_qrcode}]
                        }
                    });
                }
            }
        },

        created () {
            this.getOther();
        },

        methods: {
            imagesUploadSuccess(response, file, fileList){
               this.data.bucqrcode =response.data.path
               this.file_bucqrcode=[{name:'图片','url':response.data.url}]
            },
            handleRemove(file,filelist){
               this.data.bucqrcode =""
               this.file_bucqrcode=[]
            },
            uploadError(){

            },
            imagesUploadSuccess1(response, file, fileList){
                this.data.jctopimg =response.data.path
                console.log(this.data.jctopimg)
                this.file_jctopimg=[{name:'图片','url':response.data.url}]
            },
            handleRemove1(file,filelist){
                this.data.jctopimg =""
                this.file_jctopimg=[]
            },
            imagesUploadSuccess2(response, file, fileList){
                this.data.qq_qrcode =response.data.path
                console.log(this.data.qq_qrcode)
                this.file_qq_qrcode=[{name:'图片','url':response.data.url}]
            },
            handleRemove2(file,filelist){
                this.data.qq_qrcode =""
                this.file_qq_qrcode=[]
            },
            change(e){
                console.log(e)
            },

            /**
             * 值变化事件
             */
            contentChange1 (val) {
                this.data.register_protocol = val;
            },
            /**
             * 值变化事件
             */
            contentChange2 (val) {
                this.data.about = val;
            },
            contentChange3(val) {
                this.data.jc_rule = val;
            },
            contentChange4(val) {
                this.data.jc_close_content = val;
            },
            /**
             * 保存事件
             */
            saveContent () {
                this.api.requests('editOtherConfig', 'PUT', this.data, res => {
                    this.$message.success('保存成功');
                });
            }

        }
    }
</script>

<style  scoped>
    .form-box {
        min-width: 360px;
        width: 80%;
        min-height: 70vh;
        padding: 2vh 2vh;
        background: #ffffff;
    }
    .but-box {
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: nowrap row;
        align-items: center;
        justify-content: center;
    }
    .tips {
        width: auto;
        color: rgb(160, 160, 161);
        font-size: 12px;
    }
    .tips a {
        color: #70afef;
    }
    .tips > span {
        color: rgb(233, 142, 154);
    }
</style>